<ion-view left-buttons="leftButtons" class="view-identity">
  <ion-nav-title>
  </ion-nav-title>

  <ion-content scroll="true"
               class="refresher-top-bg"
               ng-class="{'member': !loading && formData.isMember}">

    <ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}"
                   on-refresh="doUpdate(true)">
    </ion-refresher>

    <div class="hero">
      <div class="content" ng-if="!loading">
        <i class="avatar"
           ng-if=":rebind:!formData.avatar"
           ng-class="{'avatar-wallet': !formData.isMember, 'avatar-member': formData.isMember}"></i>
        <i class="avatar"
           ng-if=":rebind:formData.avatar"
           style="background-image: url({{::formData.avatar.src}})"></i>
        <ng-if ng-if=":rebind:formData.name">
          <h3 class="light">{{::formData.name}}</h3>
        </ng-if>
        <ng-if ng-if=":rebind:!formData.name">
          <h3 class="light" ng-if=":rebind:formData.uid">{{:rebind:formData.uid}}</h3>
          <h3 class="light" ng-if=":rebind:!formData.uid"><i class="ion-key"></i> {{:rebind:formData.pubkey | formatPubkey}}</h3>
        </ng-if>
        <h4 class="assertive">
          <ng-if ng-if=":rebind:(formData.name || formData.uid) && !formData.isMember && revoked" translate>WOT.IDENTITY_REVOKED_PARENTHESIS</ng-if>
          <ng-if ng-if=":rebind:(formData.name || formData.uid) && formData.isMember && revoked" translate>WOT.MEMBER_PENDING_REVOCATION_PARENTHESIS</ng-if>
        </h4>

      </div>
      <h4 class="content light" ng-if="loading">
        <ion-spinner icon="android"></ion-spinner>
      </h4>


    </div>

    <!-- button bar-->
    <a id="wot-share-anchor-{{::formData.pubkey}}"></a>
    <div class="hidden-xs hidden-sm padding text-center">
      <button class="button button-stable button-small-padding icon ion-android-share-alt ink"
              ng-click="showSharePopover($event)"
              title="{{'COMMON.BTN_SHARE' | translate}}">
      </button>

      <!-- Allow extension here -->
      <cs-extension-point name="buttons"></cs-extension-point>

      <button class="button button-stable button-small-padding icon ion-ribbon-b ink"
              ng-click="certify()"
              ng-if=":rebind:formData.hasSelf"
              title="{{'WOT.BTN_CERTIFY' | translate}}"
              ng-disabled="disableCertifyButton">
      </button>

      <button class="button button-calm ink"
              ng-click="showTransferModal({pubkey:formData.pubkey, uid: formData.name||formData.uid})">
        {{'COMMON.BTN_SEND_MONEY' | translate}}
      </button>
    </div>

    <!-- fab buttons -->
    <div class="visible-xs visible-sm">
      <button id="fab-certify-{{:rebind:formData.uid}}"
              class="button button-fab button-fab-top-left button-fab-hero button-calm spin"
              ng-if=":rebind:(canCertify && !alreadyCertified)"
              ng-click="certify()">
        <i class="icon ion-ribbon-b"></i>
      </button>

      <cs-extension-point name="buttons-top-fab"></cs-extension-point>

    </div>

    <div class="row no-padding" >
      <div class="col col-20 hidden-xs hidden-sm">&nbsp;</div>

      <div class="col list" ng-class="::motion.ionListClass" bind-notifier="{ rebind:loading}">

        <span class="item item-divider" translate>WOT.GENERAL_DIVIDER</span>

        <!-- Pubkey -->
        <ion-item class="item-icon-left item-text-wrap ink"
                  copy-on-click="{{:rebind:formData.pubkey}}">
          <i class="icon ion-key"></i>
          <span translate>COMMON.PUBKEY</span>
          <h4 id="pubkey" class="dark text-left">{{:rebind:formData.pubkey}}</h4>
        </ion-item>

        <div class="item item-icon-left item-text-wrap"
              ng-if=":rebind:!formData.hasSelf">
          <i class="icon ion-ios-help-outline positive"></i>
          <span translate>WOT.NOT_MEMBER_ACCOUNT</span>
          <h4 class="gray" translate>WOT.NOT_MEMBER_ACCOUNT_HELP</h4>
        </div>

        <!-- Uid + Registration date -->
        <ion-item class="item-icon-left" ng-if=":rebind:formData.sigDate||formData.uid">
          <i class="icon ion-calendar"></i>
          <span translate>COMMON.UID</span>
          <h5 class="dark" ng-if=":rebind:formData.sigDate ">
            <span translate>WOT.REGISTERED_SINCE</span>
            {{:rebind:formData.sigDate|medianDate}}
          </h5>
          <span class="badge badge-stable">{{:rebind:formData.uid}}</span>
        </ion-item>

        <!-- Received certifications count -->
        <a id="helptip-wot-view-certifications"
           class="item item-icon-left item-text-wrap item-icon-right ink"
           ng-if=":rebind:formData.hasSelf"
           ng-click="showCertifications()">
          <i class="icon ion-ribbon-b"></i>
          <b ng-if=":rebind:formData.requirements.isSentry" class="ion-star icon-secondary" style="color: yellow; font-size: 16px; left: 25px; top: -7px;"></b>
          <span translate>ACCOUNT.CERTIFICATION_COUNT</span>
          <cs-badge-certification cs-id="helptip-wot-view-certifications-count"
                                  requirements="formData.requirements"
                                  parameters="{sigQty: formData.sigQty}">
          </cs-badge-certification>

          <i class="gray icon ion-ios-arrow-right"></i>
        </a>

        <!-- Signature stock -->
        <a class="item item-icon-left item-text-wrap item-icon-right ink visible-xs visible-sm"
             ng-if=":rebind:formData.hasSelf && formData.isMember"
             ng-click="showGivenCertifications()">
          <i class="icon ion-ribbon-a"></i>
          <span translate>WOT.GIVEN_CERTIFICATIONS.SENT</span>
          <cs-badge-given-certification identity="formData"
                                  parameters="$root.currency.parameters">
          </cs-badge-given-certification>
          <i class="gray icon ion-ios-arrow-right"></i>
        </a>

        <!-- Account transaction -->
        <a class="item item-icon-left item-icon-right ink"
           ng-if="!loading"
           ui-sref="app.wot_identity_tx_uid({uid:formData.uid,pubkey:formData.pubkey})">
          <i class="icon ion-card"></i>
          <span translate>WOT.ACCOUNT_OPERATIONS</span>
          <i class="gray icon ion-ios-arrow-right"></i>
        </a>

        <div
          class="item item-text-wrap item-icon-left item-wallet-event"
          ng-class="{'assertive': event.type=='error'}"
          ng-repeat="event in :rebind:formData.events">
          <i class="icon"
             ng-class="{'ion-information-circled royal': event.type=='info','ion-alert-circled': event.type=='warn'||event.type=='error','assertive': event.type=='error','ion-clock': event.type=='pending'}"></i>
          <span trust-as-html="event.message | translate:event.messageParams"></span>
        </div>

        <cs-extension-point name="general"></cs-extension-point>

        <cs-extension-point name="after-general"></cs-extension-point>

      </div>

      <div class="col col-20 hidden-xs hidden-sm">&nbsp;</div>
    </div>

  </ion-content>

  <!-- fab button -->
  <div class="visible-xs visible-sm" ng-hide="loading">
    <button id="fab-transfer" class="button button-fab button-fab-bottom-right button-assertive drop"
            ng-click="showTransferModal({pubkey:formData.pubkey, uid: formData.uid})">
      <i class="icon ion-android-send"></i>
    </button>
  </div>
</ion-view>
